<template>
	<view class="bizPage">
		<status-bar />
		<!-- 轮播图 -->
		<up-swiper height="188" :list="swiperList" keyName="url" showTitle :autoplay="false" circular radius="0"></up-swiper>
		<!-- 通知公告 -->
		<view class="noticeBar d-flex a-center" @click="toUrl('/bizPage/notice/list')">
			<view class="icon p-re" :class="{'unread': noticeList.length}">
				<image class="wh" :src="staticImg + 'tz.png'"></image>
			</view>
			<view class="flex-1">
				<view class="size28 color-222 bold p-left24">通知</view>
				<up-notice-bar :text="noticeList" direction="column" fontSize="12" color="#666" icon="" bgColor="" v-if="noticeList.length"></up-notice-bar>
			</view>
			<text class="iconfont icon-a-zujian32 size24 color-222"></text>
		</view>
		<view class="main">
			<view class="size32 color-222 bold m-bot30">任务中心</view>
			<view class="d-flex j-sb">
				<view class="task p-re" @click="toUrl('/bizPage/task/publish')">
					<image class="wh" :src="staticImg + 'fbrw.png'"></image>
					<view class="title size24 color-222 p-ab">发布任务</view>
				</view>
				<view class="task p-re" @click="toUrl('/bizPage/task/list?state=0')">
					<image class="wh" :src="staticImg + 'dbrw.png'"></image>
					<view class="title size24 color-222 p-ab">待办任务<text class="count" v-if="todoCount > 0">({{ todoCount > 99 ? 99 : todoCount }})</text></view>
				</view>
				<view class="task p-re" @click="toUrl('/bizPage/task/list?state=1')">
					<image class="wh" :src="staticImg + 'ybrw.png'"></image>
					<view class="title size24 color-222 p-ab">已办任务<text class="count" v-if="doneCount > 0">({{ doneCount > 99 ? 99 : doneCount }})</text></view>
				</view>
				<view class="task p-re" @click="toUrl('/bizPage/activity/list')">
					<image class="wh" :src="staticImg + 'hdzx.png'"></image>
					<view class="title size24 color-222 p-ab">活动中心</view>
				</view>
			</view>
		</view>
		<view class="main m-bot20">
			<view class="d-flex m-bot30">
				<view class="flex-1 size32 color-222 bold">工作情况</view>
				<view v-if="startDate && endDate">
					<text class="size26 color-666 m-right10">{{ startDate }} - {{ endDate }}</text>
					<!-- <text class="iconfont icon-a-zujian32 size24 color-999"></text> -->
				</view>
			</view>
			<view class="table">
				<view class="label d-flex a-center">
					<view class="first">工作任务</view>
					<view class="flex-1">倒计时</view>
					<view class="third">完成情况</view>
					<view class="fourth">得分</view>
				</view>
				<view class="value d-flex a-center" @click="toUrl('/bizPage/task/workDetails?id=' + item.id)" v-for="(item, index) in taskList" :key="index">
					<view class="first ellipsis_1">{{ item.taskName }}</view>
					<view class="flex-1">{{ item.diffDay }}天</view>
					<view class="third">
						<text class="iconfont icon-zhengque-fill size32 m-right6" v-if="item.status == 1"></text>
						<text class="iconfont icon-cuowu-fill size32 m-right6" v-if="item.status == 2"></text>
						<text class="size24">{{ item.statusName }}</text>
					</view>
					<view class="fourth color-222 bold">{{ item.score }}</view>
				</view>
			</view>
			<view class="size24 color-999 text-center m-top34">得分率：{{ scorePercent }}</view>
		</view>
		<view class="main">
			<view class="d-flex m-bot30">
				<view class="flex-1 size32 color-222 bold">常用工具</view>
				<view @click="toUrl('/bizPage/index/moreTools')">
					<text class="size24 color-666 m-right10">编辑</text>
					<text class="iconfont icon-a-zujian32 size24 color-999"></text>
				</view>
			</view>
			<view class="row">
				<view class="tool d-flex a-center" @click="toUrl(item.path)" v-for="(item, index) in tools" :key="index">
					<image class="icon m-right12" :src="imgUrls(item.icon)"></image>
					<text class="size24 color-222">{{ item.name }}</text>
				</view>
			</view>
		</view>

		<tab-bar />

		<!-- <uni-calendar ref="calendar" :insert="false" :range="true" :clearDate="false" @confirm="dateConfirm" /> -->
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { staticImg } from '@/utils/config.js'
	import { toUrl, Toast, imgUrls } from '@/utils/utils.js'
	import Http from '@/utils/request.js'
	import statusBar from '../components/statusBar.vue'
	import tabBar from '../components/tabBar.vue'

	onLoad(() => {
		getSwiper()
		getNotice()
	})

	onShow(() => {
		getTools()
		getTasks()
		getCount()
	})

	// 轮播图
	const swiperList = ref([])
	const getSwiper = () => {
		Http.get({
			url: '/hr/common/getBanner'
		}).then(res => {
			if(res.code != 0) return Toast(res.msg)
			let result = res.data || []
			swiperList.value = result.map(item => ({...item, title: item.name}))
		})
	}

	// 通知公告
	const noticeList = ref([])
	const getNotice = () => {
		Http.get({
			url: '/hr/getNoticeList',
			data: {
				is_read: '0',
				page: 1,
				limit: 10
			}
		}).then(res => {
			if(res.code != 0) return Toast(res.msg)
			let result = res.data.list || []
			noticeList.value = result.map(item => item.noticeTitle)
		})
	}

	// 常用工具
	const tools = ref([])
	const getTools = () => {
		Http.get({
			url: '/api/getOptions',
		}).then(res => {
			if(res.code != 0) return Toast(res.msg)
			tools.value = res.data || []
		})
	}

	// 工作任务
	// status：0新建任务、1已完成、2未完成、4已提交待审核
	const taskList = ref([])
	const scorePercent = ref('')
	const startDate = ref('')
	const endDate = ref('')
	const getTasks = () => {
		Http.get({
			url: '/hr/task/workTaskList'
		}).then(res => {
			if(res.code != 0) return Toast(res.msg)
			taskList.value = res.list || []
			scorePercent.value = res.scorePercent
			startDate.value = res.startTimeDate
			endDate.value = res.endTimeDate
		})
	}

	const todoCount = ref(0)
	const doneCount = ref(0)
	const getCount = () => {
		Http.get({
			url: '/hr/task/countTask'
		}).then(res => {
			if(res.code != 0) return Toast(res.msg)
			let result = res.data || ''
			todoCount.value = result.representativeTaskCount || 0
			doneCount.value = result.completedTaskCount || 0
		})
	}

	// 创建ref对象
	const calendar = ref(null)
	const openCalendar = () => {
		calendar.value.open()
	}
	const dateConfirm = (e) => {
		// before和after按选择的顺序，可取data的第一项和最后一项
		console.log(e)
	}
</script>

<style lang="scss" scoped>
	.bizPage {
		min-height: 100vh;
		background: #f6f7fb;
	}
	.noticeBar {
		height: 120rpx;
		background: #ecf4ff;
		border: 1rpx solid #f2f2f2;
		padding: 0 20rpx 0 24rpx;
		.icon {
			width: 52rpx;
			height: 52rpx;
			&.unread::after {
				content: '';
				width: 14rpx;
				height: 14rpx;
				background: #fb3449;
				border-radius: 50%;
				position: absolute;
				right: 0;
				top: 0;
			}
		}
	}
	.main {
		padding: 30rpx 20rpx;
		background: #ffffff;
		.task {
			width: 162rpx;
			height: 166rpx;
			.title {
				width: 100%;
				bottom: 24rpx;
				left: 0;
				text-align: center;
			}
			.count {
				color: #ff575f;
				font-weight: bold;
			}
		}
		.table {
			border: 1rpx solid #e1e1e1;
			border-radius: 10rpx;
			.label, .value {
				height: 66rpx;
				padding: 0 26rpx;
				> view {
					font-size: 24rpx;
					&:not(:first-child) {
						text-align: right;
					}
				}
				.first, .third {
					width: 200rpx;
				}
				.fourth {
					width: 160rpx;
				}
			}
			.label {
				background: #eeeff3;
				color: #222;
				font-weight: bold;
			}
			.value {
				border-top: 1px solid #e1e1e1;
				color: #666;
				.icon-zhengque-fill {
					vertical-align: bottom;
					color: #12b7bd;
				}
				.icon-cuowu-fill {
					vertical-align: bottom;
					color: #ff575f;
				}
			}
		}
		.tool {
			width: 224rpx;
			height: 88rpx;
			background: #f6f7fc;
			border-radius: 10rpx;
			padding: 0 20rpx;
			margin: 0 19rpx 20rpx 0;
			&:nth-child(3n) {
				margin-right: 0;
			}
			.icon {
				width: 50rpx;
				height: 50rpx;
				flex-shrink: 0;
			}
		}
	}
	::v-deep .u-notice-bar {
		padding: 12rpx 0 0 24rpx !important;
	}
	::v-deep .u-swiper__wrapper__item__wrapper__title {
		font-size: 24rpx !important;
	}
</style>
